<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex布局--案例二</title>
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>

    <div id="container">
        <div id="header">Chat List</div>
        <div id="main">
            <div class="item">
                <div class="left left-1">

                </div>
                <div class="center">
                    <div class="up">+7</div>
                    <div class="down">十连三金</div>
                </div>
                <div class="right">
                    <div>上午8:23</div>
                </div>
            </div>

            <div class="item">
                <div class="left left-2">

                </div>
                <div class="center">
                    <div class="up">Sinemore</div>
                    <div class="down">又双叒歪了</div>
                </div>
                <div class="right">
                    <div>上午11:44</div>
                </div>
            </div>

            <div class="item">
                <div class="left  left-3">

                </div>
                <div class="center">
                    <div class="up">Dream</div>
                    <div class="down">上号开肝</div>
                </div>
                <div class="right">
                    <div>下午2:33</div>
                </div>
            </div>

            <div class="item">
                <div class="left  left-4">

                </div>
                <div class="center">
                    <div class="up">小熊爱吃哈密瓜</div>
                    <div class="down">哥哥的女朋友不会生气吧？</div>
                </div>
                <div class="right">
                    <div>下午4:26</div>
                </div>
            </div>

            <div class="item">
                <div class="left  left-5">

                </div>
                <div class="center">
                    <div class="up">哒哒哒</div>
                    <div class="down">兔兔这么可爱怎么能吃兔兔</div>
                </div>
                <div class="right">
                    <div>下午8:59</div>
                </div>
            </div>

            <div class="item">
                <div class="left  left-6">

                </div>
                <div class="center">
                    <div class="up">笔墨动轻云</div>
                    <div class="down">刚满18岁</div>
                </div>
                <div class="right">
                    <div>4月28日</div>
                </div>
            </div>

            <div class="item">
                <div class="left  left-7">

                </div>
                <div class="center">
                    <div class="up">北方方方方</div>
                    <div class="down">aaaab</div>
                </div>
                <div class="right">
                    <div>4月26日</div>
                </div>
            </div>
            <div class="item">
                <div class="left  left-8">

                </div>
                <div class="center">
                    <div class="up">不会思考</div>
                    <div class="down">今晚吃啥</div>
                </div>
                <div class="right">
                    <div>4月22日</div>
                </div>
            </div>
        </div>
        <div id="footer"></div>
    </div>
</body>

</html>